<template>
  <view class="content">
    <u-image :showLoading="true" :src="'/api/file/img?name=' +form.img" width="100%" mode="widthFix"></u-image>

    <view class="intro">
      <view class="line-one">
        <view class="title">{{ form.name }}</view>
        <view class="price demo-tag-text">{{ form.price }}/{{ form.unitName }}</view>
      </view>

      <view class="remark">{{ form.remark }}</view>

    </view>

    <view v-if="formGoods.type==='lend'">
      <view v-if="form.status==2">请联系租客{{ formIn.username }}{{ formIn.contact }}</view>
      <button @click="outGoods" v-if="form.status==1">确认出租</button>

      <view v-if="form.status==3">请联系租客{{ formIn.username }}{{ formIn.contact }}</view>
      <button @click="takeBackGoods" v-if="formAgreement.status==2">确认归还</button>

    </view>

    <view v-else>

      <view v-if="form.status==1">请联系出租人{{ form.userName }}{{ form.contact }}</view>
      <button @click="submit" v-if="form.status==0">想租</button>
      <button @click="submit" v-if="form.status==1">不想租了</button>

      <view v-if="form.status==2">请联系出租人{{ form.userName }}{{ form.contact }}</view>
      <button @click="returnGoods" v-if="formAgreement.status==1">归还</button>

    </view>


  </view>


</template>

<script>
import {
  categoryListApi,
  channelDeleteApi,
  channelListApi,
  goodsAddApi,
  goodsSelectByIdApi, goodsSelectOneApi,
  goodsUpdateApi,
  marketAddApi, marketDeleteApi,
  marketGetInInfApi,
  marketOutApi, marketSelectByIdApi,
  marketTakeBackApi,
  outlayAddApi,
  outlayListApi,
  outlaySelectByIdApi,
  outlayUpdateApi, returnGoodsApi
} from "@/network/api/api";
import {getUnitText, ShowToast} from "@/common/common";

export default {
  data() {
    return {
      fileList1: [],
      current: 0,
      selectCategory: 1,
      list: [],
      listChannel: [
        {label: '天', value: 0},
        {label: '周', value: 1},
        {label: '月', value: 2},
        {label: '年', value: 3},
      ],
      channelShow: false,
      formIn: {},
      formAgreement: {},
      form: {
        name: '',
        id: 0,
        img: "",
        price: 0,
        unit: 0,
        userName: "",

        /*返回的数据*/
        categoryName: "",
        createTime: "",
        unitName: "",

        /*上传的数据*/
        remark: ""
      },
      checkboxList1: [],
      radioList1: [],


      formGoods: {}
    };
  },
  computed: {
    chunkedItems() {
      const chunkSize = 10;
      const chunked = [];
      for (let i = 0; i < this.list.length; i += chunkSize) {
        chunked.push(this.list.slice(i, i + chunkSize));
      }
      return chunked;
    }
  },
  onLoad(e) {
    console.log(e.type === 'lend')
    this.formGoods = e

    this.getData()
    if (e.type === 'lend') {
      console.log("借出")
      this.getInInfo(this.form.id)
    } else {
      console.log('借入')
    }
  },
  onReady() {
    // this.$refs.form1.setRules(this.rules);
  },
  onShow() {
    //  this.$refs.form1.setRules(this.rules);
  },
  methods: {
    getData() {
      const _this = this;
      // 根据goodsId查询物品信息
      goodsSelectOneApi(_this.formGoods).then(res => {
        if (res.code === 200) {
          Object.assign(_this.form, res.data[0])
          _this.form.unitName = getUnitText(res.data[0].unit);

          console.log(_this.fileList1)
        } else {
        }
      }).catch(err => {
        console.log(err)
      })

      // 根据agreementId查询订单信息
      console.log(_this.formGoods)
      if (_this.formGoods.agreementId !== undefined) {
        marketSelectByIdApi({agreementId: _this.formGoods.agreementId}).then(res => {
          if (res.code === 200) {
            Object.assign(_this.formAgreement, res.data)
            console.log(_this.fileList1)
          } else {
          }
        }).catch(err => {
          console.log(err)
        })
      }


    },
    onSelectChannel(arr) {
      console.log(arr)
      let current = arr[0];
      this.form.unit = current.value;
      this.form.unitName = current.label;
    },
    change(e) {
      this.current = e.detail.current;
    }, click(e) {
      console.log(e)
      this.form.categoryId = e
    },

    ShowTest() {

    },
    outGoods() {
      const _this = this;
      this.form.categoryPic = null

      //借出
      marketOutApi(this.form).then(res => {
        if (res.code === 200) {
          uni.showToast({
            type: 'success',
            title: res.message
          })
          _this.getData();
          // uni.switchTab({url: "/pages/tabbar/lease/lease"})
        } else {

        }
      }).catch(err => {
        console.log(err)
      })

    }, takeBackGoods() {
      const _this = this;
      //收回
      marketTakeBackApi(this.form).then(res => {
        if (res.code === 200) {
          uni.showToast({
            type: 'success',
            title: res.message
          })
          _this.getData();
        }
      }).catch(err => {
        console.log(err)
      })

    }, returnGoods() {
      const _this = this;
      //收回
      returnGoodsApi({agreementId: _this.formGoods.agreementId}).then(res => {
        if (res.code === 200) {
          uni.showToast({
            type: 'success',
            title: res.message
          })
          _this.getData();
        }
      }).catch(err => {
        console.log(err)
      })

    },
    submit() {
      const _this = this;
      this.form.categoryPic = null

      if (this.form.status == 1) {
        //修改
        marketDeleteApi(this.form).then(res => {

          if (res.code === 200) {
            uni.showToast({
              type: 'success',
              title: res.message
            })
            _this.getData();
            // uni.switchTab({url: "/pages/tabbar/lease/lease"})
          } else {
            uni.showToast({
              icon:'error',
              title: res.message
            })
            uni.navigateBack(-1)
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        //修改
        marketAddApi(this.form).then(res => {
          if (res.code === 200) {
            uni.showToast({
              type: 'success',
              title: res.message
            })
            _this.getData();
            // uni.switchTab({url: "/pages/tabbar/lease/lease"})
          } else {
            uni.showToast({
              icon:'error',
              title: res.message
            })
            uni.navigateBack(-1)
          }
        }).catch(err => {
          console.log(err)
        })
      }


    },
    onCalendar1(e) {
      this.form.birthday = e.result;
    },
    // 删除图片
    deletePic(event) {
      console.log("删除图片")
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    onUploaded(event) {
      console.log(event[0].response.data)
      console.log("新增图片")
      this.form.img = event[0].response.data
    }, // 删除
    remove() {
      this.form.img = ''
    },
    getInInfo() {
      const _this = this;
      //获取租客信息
      marketGetInInfApi(this.formGoods).then(res => {
        if (res.code === 200) {
          console.log(res)
          Object.assign(_this.formIn, res.data)
        } else {

        }
      }).catch(err => {
        console.log(err)
      })
    }
  },

};
</script>
<style scoped lang="scss">
.line-one {
  display: flex;
}


.demo-tag {
  display: flex;
  margin-top: 5px;
}


.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}


.cate-item {
  &.selectCategory {
    //background-color: #dadada !important;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    //-ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    //filter: gray;
  }
}

.grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: $u-type-info;
}

.swiper {
  height: 280rpx;
}

.indicator-dots {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator-dots-item {
  background-color: $u-tips-color;
  height: 6px;
  width: 6px;
  border-radius: 10px;
  margin: 0 3px;
}

.indicator-dots-active {
  background-color: $u-type-primary;
}
</style>